<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<head>
	<link rel='SHORTCUT ICON' href='<s:url value="/theme/img/carepad.png" />' />
	<link href="<s:url value='/theme/css/login.css'/>" rel="stylesheet"	type="text/css">
	<script src="<s:url value='/theme/js/jquery-1.10.2.js'/>"></script>
</head>
<html>
<body>
	<div class="login-wrap group">
		<div class="datetime-wrap">
			<div class="datetime">
				<s:include value="/WEB-INF/content/common/date-time.jsp"></s:include>
				<span id="datetime"></span>
			</div>
		</div>

		<header class="signup-header" style="margin-top: 40px;">
			<h1><s:text name="global.application.title" /></h1>
			<h2><s:text name="user.login.title" /></h2>
		</header>

		<div class="login-area">
			<s:form action="signIn" namespace="/signin" method="post" cssClass="login-form">
				<s:actionerror theme="bootstrap" id="showalert"/>
				<s:fielderror >
					<s:param>emailAddress</s:param>
		        </s:fielderror>
				<div id="login-email" class="field">
					<label for="login-email-field"><s:text name="user.login.name" /></label> 
					<input 
						id="login-email-field" 
						name="users.account" 
						required="required" type="text"
						placeholder='<s:text name="user.login.placeholder.username" />'
						value="kida">
				</div>

				<div id="login-password" class="field">
					<label for="login-password-field"><s:text name="user.login.placeholder.password" /></label> 
					<input
						id="login-password-field_" 
						name="users.password"
						required="required" size="30" type="password"
						placeholder='<s:text name="user.login.password" />' 
						value="kida">
				</div>

				<div>
					<label class="spacing-label">&nbsp;</label> 
					<input
						value=<s:text name="user.login.signin" /> 
						class="button blue"
						type="submit"> &nbsp;&nbsp; 
						<a href="#" id="forgot-password-link"><s:text name="user.login.forgot.password" /></a>
				</div>
			</s:form>

			<s:form action="forget" namespace="/password" theme="simple" method="post" 
					id="forgot-password-form" cssClass="forgot-password-form login-form" cssStyle="display: none;">

				<h3><s:text name="password.forget.title" /></h3>
				<div class="field">
					<label for="forgot-email"><s:text name="password.email" /></label>
					<input 
						id="forgot-email" 
						name="emailAddress"
						placeholder='<s:text name="password.forget.email.placeholder"/>'
						type="email" required="required">
				</div>

				<div class="field">
					<input id="forgot-email-btn"
						value=<s:text name="password.forget.request.submit"/>
						class="button blue" type="submit">
				</div>
			</s:form>

			<div class="footer-callout">
				<s:include value="/WEB-INF/content/common/footer.jsp" />
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			$("#forgot-password-link").click(function() {
				$("#forgot-password-form").slideToggle();
			});
			
			var forgetPasswordStatus = '<s:property value="forgetPasswordStatus" />';
			
			if(forgetPasswordStatus == 'SUCCESS'){			
				var email = '<s:property value="emailAddress" />';
				$('#showalert').removeClass();
				$('#showalert').addClass('alert alert-success');
				$('#showalert').find("p").append(" " + email);
				
			} else if(forgetPasswordStatus == 'ERROR'){
			 $('#forgot-password-form').attr('style', 'display: block;');
			}
			
		});	
	</script>